<template>
  <div class="cinema-list">
    <div class="cinema-list-left">
      <div class="cinemaName">{{ item.name }}</div>
      <div class="cinemaAdress">{{ item.address }}</div>
    </div>
    <div class="cinema-list-rigth">
      <div class="lowPrice" v-if="lowPrice != 0">￥{{ lowPrice }}起</div>
      <div class="noLowPrice" v-else><van-icon name="location-o" /></div>
      <div class="longitude">{{ Distance }}km</div>
    </div>
  </div>
</template>
<script>
export default { name: "cityItem" };
</script>
<script setup>
import { computed } from "@vue/reactivity";
import { ref } from "vue";

const props = defineProps({
  item: { type: Object },
});
const lowPrice = computed(() => {
  const price = props.item.lowPrice;
  if (price - parseInt(price / 100) * 100 == 0) {
    return price / 100;
  } else {
    return (price / 100).toFixed(1);
  }
});
const Distance = computed(() => {
  return props.item.Distance.toFixed(1);
});
</script>
<style lang="scss" scoped>
.cinema-list {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
  &-left {
    width: 60%;

    .cinemaName {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #191a1b;
      font-size: 15px;
    }
    .cinemaAdress {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-right {
    flex: 1;
  }
  .lowPrice {
    font-size: 15px;
    color: #ff5f16;
    text-align: center;
  }
  .noLowPrice {
    text-align: center;
    font-size: 15px;
  }
  .longitude {
    font-size: 11px;
    color: #797d82;
    margin-top: 5px;
    text-align: center;
  }
}
</style>
